<template>
  <el-form
      label-position="left"
  >

    <!--  所属区域  -->
    <el-form-item label="所属区域">
      <Select
          @SelectChange="districtChange"
          :flushFlag="districtResetFlag"
          :options="districtOptions"
          :selectValue="district_num"
      />
    </el-form-item>

    <!--  手机名称  -->
    <el-form-item label="手机名称">
      <el-input
          size="mini"
          style="width: 12vw"
          v-model="name"
          placeholder="请输入手机名称"></el-input>
    </el-form-item>

    <!--  手机号码  -->
    <el-form-item label="手机号码">
      <el-input
          size="mini"
          v-model="phonenumber"
          style="width: 12vw"
          placeholder="请输入手机号码"></el-input>
    </el-form-item>

    <!--  提交与重置  -->
    <el-row style="text-align: center">
      <el-button
          type="primary"
          @click="editMobile"
      >提交
      </el-button>
      <el-button
          type="primary"
          @click="resetForm"
      >重置
      </el-button>
    </el-row>

  </el-form>
</template>

<script>
// --------------- element-ui ---------------------
import Select from "../../../../../components/element-ui/elSelect"
// --------------- axios ------------------------
import {editMobel} from "../../../../../api/work";

export default {
  components: {Select},
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          district_num: 1,
          name: "",
          phonenumber: "",
          id: ""
        }
      }
    },
    districtOptions: {
      type: Array,
      default: () => {
        return [
          {
            value: 1,
            label: "未知"
          },
          {
            value: 2,
            label: "假药"
          }, {
            value: 3,
            label: "虚假信息"
          },
          {
            value: 4,
            label: "政治反动"
          }, {
            value: 5,
            label: "恐怖主义"
          },
          {
            value: 6,
            label: "淫秽色情"
          }
        ]
      }
    }
  },
  created() {
    this.resetForm();
  },
  watch: {
    info: function (val) {
      this.district_num = val.district_num;
      this.name = val.name;
      this.phonenumber = val.phonenumber;
      this.id = val.id;
    },
  },
  data() {
    return {
      // ----------- 表单 ----------------
      district_num: 1,
      name: "",
      phonenumber: "",
      districtResetFlag: false,
      id: undefined
    }
  },
  methods: {
    // --------------- axios  ------------
    /**
     * 修改手机信息
     */
    editMobile: function () {
      let pd = {
        district: this.district_num,
        name: this.name,
        phonenumber: this.phonenumber,
        id: this.id,
        time: this.nowTime
      }
      editMobel(pd)
          .then(res => {
            this.$message(res.data.data.msg);
            this.$emit("editSucceed")
          })
          .catch(err => {
            console.error(err)
          })
    },
    // ------------ 功能 -----------------

    /**
     * 所属地区发生变化
     * @param val
     */
    districtChange: function (val) {
      this.district_num = val;
    },

    /**
     * 重置
     */
    resetForm: function () {
      this.district_num = this.info.district_num;
      this.name = this.info.name;
      this.phonenumber = this.info.phonenumber;
      this.districtResetFlag = !this.districtResetFlag;
      this.id = this.info.id;
    }
  },
  computed: {
    nowTime: function () {
      let now = new Date();
      return `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
    }
  }
}
</script>

<style scoped>

</style>